<template>
    <div class="wechat-menu-list">
        <h1>添加食品</h1>

            <el-form id="food"  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="图片" prop="thumb">
                    <el-upload
                            class="upload-demo"
                            drag
                            :action="uploadUrl"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            accept="jpg"
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                    <div class="thumb" v-loading="loading">
                        <img v-if="thumb" :src="thumb" class="thumb">
                    </div>
                </el-form-item>
                <el-form-item label="食物分类" prop="species_id">
                    <el-select v-model="ruleForm.species_id" placeholder="请选择">
                        <el-option
                                v-for="item in list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input type="text" v-model="ruleForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="其他称呼" prop="other_name">
                    <el-input type="text" v-model="ruleForm.other_name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="脂肪含量" prop="fat">
                    <el-input type="text" v-model="ruleForm.fat" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="嘌呤含量" prop="purine">
                    <el-input type="text" v-model="ruleForm.purine" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="热量" prop="hot">
                    <el-input type="text" v-model="ruleForm.hot" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="碳水化合物" prop="carbohydrate">
                    <el-input type="text" v-model="ruleForm.carbohydrate" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="蛋白质" prop="protein">
                    <el-input type="text" v-model="ruleForm.protein" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="膳食纤维" prop="dietary_fiber">
                    <el-input type="text" v-model="ruleForm.dietary_fiber" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="点评" prop="comment">
                    <el-input type="textarea" v-model="ruleForm.comment"></el-input>
                </el-form-item>
                <el-form-item label="其他描述" prop="description">
                    <el-input type="textarea" v-model="ruleForm.description"></el-input>
                </el-form-item>
                <el-form-item label="置顶" prop="top">
                    <el-radio-group v-model="ruleForm.top">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>



    </div>
</template>

<script>

    export default {
        name: 'wechat-menu-list',
        data() {
            return {
                loading:true,
                apiUrl: apiUrl,
                ruleForm: {
                    thumb:'',
                    species_id:'',
                    name: '',
                    other_name: '',
                    fat: 0,
                    purine: 0,
                    hot: 0,
                    carbohydrate:0,
                    protein:0,
                    dietary_fiber:0,
                    comment:'',
                    description:'',
                    top:0
                },
                rules: {
                    name: [
                        {required: true, message: '请输入食物名称', trigger: 'blur'}
                    ],
                    species_id: [
                        {required: true, message: '请输入食物名称', trigger: 'change'}
                    ]
                },
                //分类列表
                list:[],
                formLabelWidth: '120px'

            }
        },

        mounted() {
            this.$nextTick(function () {
                this.load(); //概况
            })
        },
        computed: {
            // a computed getter
            uploadUrl() {
                // `this` points to the vm instance
                return this.apiUrl+'Food/upload';
            },
            submitUrl(){
                return this.apiUrl + 'Food/add';
            },
            thumb(){
                return this.ruleForm.thumb ? '/api/'+this.ruleForm.thumb : '';
            }
        },
        methods: {

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        this.$http.post(this.submitUrl, this.ruleForm).then(response => {
                            if(response.data.status==1){
                                this.$message.success('保存成功');
                                this.$router.push('/food/list/1');
                            }else{
                                this.$message.error('保存失败');
                            }
                        }, response => {
                            this.$message.error('保存失败');
                            console.log(response);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //分类数据请求
            load() {
                this.$http.get(this.apiUrl + 'FoodSpecies/species').then(response => {
                    this.loading = false;
                    console.log(response.data);
                    this.list = response.data;
                }, response => {
                    this.$message.error('加载失败');
                    console.log(response);
                });
            },
            handleAvatarSuccess(response, file) {
                console.log(response);
                console.log(file);
                this.ruleForm.thumb = response.msg.savepath+response.msg.savename;
                this.imageUrl = URL.createObjectURL(file.raw);
                this.loading = false;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                this.loading=true;
                return isJPG && isLt2M;
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.thumb{width:100px;height:100px;}
</style>
